<template>
	<view class="content-class">
		<u-row class="user-info" justify="space-between">
			<u-row>
				<image :src="icon"></image>
				<view class="info">
					IVE-张元英
					<span> 出生日期：2004-08-31</span>
				</view>
			</u-row>

		</u-row>
		<u-row class="tip">
			<u--image style="margin-right: 8px;margin-left: 25px;" src="../../static/images/my/sbsz.png" width="16px" height="16px"></u--image>
			张元英的健康戒指(正在测量...)
		</u-row>
		<u-row justify="center" class="cl-yh">
			<u--image class="nh" src="../../static/images/measuring/cl.png" width="250px" height="250px"></u--image>
			<u--image src="../../static/images/measuring/cl-yh.png" width="280px" height="280px"></u--image>
			<charts style="position: absolute;top:0px;z-index:9999;height: 280px;width: 100%;" :option="option" id="measuring1" :height="280"></charts>
		</u-row>

		<view class="tips">
			<u-row> 温馨提示：</u-row>
			<span>
				直井怜席卷过的地方，人们都晕过去了，如果是张元英来的话人们又会大喊世界上怎么会有人长得这么美。当安宥真突然出现，人们又瞬间陷入疯狂。 ​​​
			</span>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				icon: require("../../static/images/homePage/tx.png"),
				count: 0,
				timer: null,
				option: {
					grid: {
						top: "middle",
						height: "100%",
						containLabel: true,
					},
					color: ["transparent"],
					series: [{
						name: "Line 1",
						type: "pie",
						clockWise: true,
						radius: ["96%", "99%"],
						itemStyle: {
							normal: {
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
						hoverAnimation: false,
						data: [{
								value: 0,
								name: "01",
								itemStyle: {
									normal: {
										color: '#FFD8BB',
										label: {
											show: false,
										},
										labelLine: {
											show: false,
										},
									},
								},
							},
							{
								name: "02",
								value: 100,
							},
						],
					}, ],

				}
			};
		},
		methods: {
			skipMeasuring(head) {
				uni.navigateTo({
					url: '/pages/Measuring/Measuring'
				})
			},
			startTimer() {
				this.timer = setInterval(() => {
					this.count += 10
					this.option.series[0].data[0].value = this.count
					this.option.series[0].data[1].value = 100 - this.count
					// 当数值达到或超过100时重置为0
					if (this.count >= 110) {
						this.count = 0
						this.option.series[0].data[0].value = this.count
						this.option.series[0].data[1].value = 100 - this.count
					}
				}, 300)
			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
		onUnload() {
			// 组件销毁时清除定时器
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onLoad() {
			this.startTimer()
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #040607;
	}

	.content-class {

		padding-left: 15px;
		padding-right: 15px;

		.user-info {
			padding: 20px 0px 10px 0px;
			font-size: 18px;

			image {
				width: 58px;
				height: 58px;
				margin-right: 8px;
			}

			.info {
				display: flex;
				flex-direction: column;

				span {
					margin-top: 6px;
				}
			}

			span {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				margin-right: 6px;
			}
		}

		.tip {
			background-image: url("../../static/images/homePage/border.png");
			background-size: 100% 100%;
			background-position: top;
			background-repeat: no-repeat;
			font-weight: 500;
			font-size: 14px;
			padding: 14px 0px;
			display: inline-flex;
			align-items: center;
			text-align: center;
			width: 100%;
			margin: 10px 0px;
		}

		.tips {
			background-image: url("../../static/images/measuring/cl-border.png");
			background-size: 100% 100%;
			background-position: top;
			background-repeat: no-repeat;
			font-size: 14px;
			padding: 15px;
			display: flex;
			flex-direction: column;
			width: calc(100% - 30px);
			line-height: 20px;
			margin-top: 70px;

			span {
				color: #FFD8BB;
			}
		}

		.cl-yh {
			position: relative;
			height: 280px;
			margin: 30px 0px;

			::v-deep.u-image {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.nh {
				::v-deep.u-image {
					top: calc(50% + 5px);

				}
			}
		}


	}
</style>